/*
    mapState辅助函数
        当一个组件需要多个状态的时候，如果将这些状态都声明为计算属性会有些重复和冗余。
        使用mapState函数可以帮助我们生成计算属性

*/


import { mapState } from 'vuex'

export default {
    data () {
        return {
            localCount: 0,
            str: ''
        }
    },

    computed: mapState({
      // 箭头函数可使代码更简练，注意箭头函数没有this（写法一）
      count: state => state.count,
  
      // 传字符串参数 'count' 等同于 `state => state.count` （写法二）
      countAlias: 'count',
  
      // 为了能够使用 `this` 获取局部状态，必须使用常规函数 （写法三，参数是state对象）
      countPlusLocalState (state) {
        return state.count + this.localCount
      }
    })
  }

  // 当映射的计算属性的名称与state的子节点名称相同时，我们也可以给mapState传一个字符串数组
  computed: mapState([
    // 映射 this.count 为 store.state.count
    'count'
  ])


  
  /*
     对象展开运算符
        mapState函数返回的是一个对象，通过对象展开运算符可以将它与局部计算属性混合使用
  
  */

 computed: {
    localComputed () { /* ... */ },
    // 使用对象展开运算符将此对象混入到外部对象中
    ...mapState({
      // ...
    })
  }
  